import React from 'react'

const Recovery = () =>
{

    const [form] = React.$Vant.Form.useForm()

    const [LoginUser,setLoginUser] = React.useState(React.$LoginUser)
    const [searchParams] = React.$Router.useSearchParams()
    const [id,setId] = React.useState(searchParams.get('id'))
    const [factory,setFactory] = React.useState({})
    const [expname,setExpname] = React.useState('')
    const [express,setExpress] = React.useState([])
    const [expshow,setExpshow] = React.useState(false)
    const [buscode,setBuscode] = React.useState('')
    const [busexpid,setBusexpid] = React.useState(0)
    const [tel,setTel] = React.useState('')
    const [index,setIndex] = React.useState(0)

    const info = React.useRef(
        {
            product:{},
            business:{},
            express:{}
        }
    )

    const picker = React.useRef()

    // 初始化路由跳转对象
    const navigate = React.$Router.useNavigate()

    React.useEffect(() => {
        let LoginUser = React.$Cookie.load('LoginUser') ? React.$Cookie.load('LoginUser') : {}

        setLoginUser(LoginUser)

        getInfoData()

        getFactoryData()
    },[])

    // 获取数据的方法
    const getInfoData = async () =>
    {
        let result = await React.$Api.LeaseInfo({id:id})

        if(result.code === 1)
        {
            info.current = result.data.info

            setTel(result.data.tel)

            getExpressData()
        }else{
            React.$Vant.Notify.show({
                type:'warning',
                message:result.msg,
            })

            return false
        }
    }

    // 查询厂家信息
    const getFactoryData = async () =>
    {
        let result = await React.$Api.LeaseRecovery({action:'factory'})

        if(result.code === 1)
        {
            setFactory(result.data)
        }
    }

    // 获取物流公司的数据
    const getExpressData = async () =>
    {
        let result = await React.$Api.LeaseExplist()

        var defaultIndex = 0

        if(info.current.busexpid)
        {
            setExpname(info.current.busexp.name)
            setBusexpid(info.current.busexpid)
            setBuscode(info.current.busexpcode)

            for(let index in result.data)
            {
                if(result.data[index].value == info.current.busexpid)
                {
                    
                    defaultIndex = parseInt(index) + 1
                    break
                }
            }
        }

        setExpress(result.data)
        setIndex(defaultIndex)
    }

    // 提交表单
    const onRecovery = async (form) =>
    {
        if(!buscode)
        {
            React.$Vant.Notify.show({
                type:'warning',
                message:'归还的物流单号不能为空'
            })

            return false
        }

        // 组装数据
        let data = {
            id:info.current.id,
            busexpid:busexpid,
            busexpcode:buscode,
            action:'recovery'
        }

        let result = await React.$Api.LeaseRecovery(data)

        if(result.code === 1)
        {
            React.$Vant.Notify.show({
                type:'success',
                message:result.msg,
                onClose:() => {
                    navigate(-1)
                }
            })
        }else{
            React.$Vant.Notify.show({
                type:'warning',
                message:result.msg,
            })

            return false
        }
    }

    // 选择归还商品时需要配送的物流
    const ExpressConfirm = (_,item) =>
    {
        setExpshow(false)
        setExpname(item.text)
        setBusexpid(item.value)
    }


    const onBack = () =>
    {
        navigate(-1)
    }

    const onContact = () =>
    {
        React.$Vant.Dialog.confirm({
            title:'拨打电话',
            message:'是否确认拨打官方客服热线？'
        }).then(async (res) => {
            window.location.href = `tel:${tel}`

        }).catch((err) => {
            console.log(err)
        })
    }

    return (
        <>
            {/* 导航栏 */}
            <React.$Vant.Sticky>
                <React.$Vant.NavBar
                    title='归还商品'
                    zIndex="10"
                    onClickLeft={onBack}
                />
            </React.$Vant.Sticky>

            <div className="zy_module_content">
                <div className="swiper-container vip_user_order">
                    <div className="swiper-slide">
                        <ul>
                            <li style={{ borderBottom: 'none' }}>
                                <div className="vip_order_goods">
                                    <h3>
                                        <React.$Router.NavLink to={`/product/product/info?pid=${info.current.proid}`}>
                                            <i><img src={info.current.product.thumbs_text} /></i>
                                            <dl>
                                                <dd>
                                                    <em>厂家联系人：</em>
                                                    <em>{factory.contact}</em>
                                                </dd>
                                                <dd>
                                                    <em>厂家联系电话：</em>
                                                    <em>{factory.mobile}</em>
                                                </dd>
                                                <dd>
                                                    <em>归回地址：</em>
                                                    <em>{factory.address}</em>
                                                </dd>
                                            </dl>
                                        </React.$Router.NavLink>
                                    </h3>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div className="lianxi_ge">
                <a onClick={onContact}>联系客服</a>
            </div>
            <div className="rem2"></div>

            <div className='recovery'>

                <React.$Vant.Form form={form} onFinish={onRecovery}>
                    {/* 快递方式 */}
                    <React.$Vant.Form.Item
                        label="快递公司"
                        onClick={() => { setExpshow(true) }}
                        rules={[
                            { required: true, message: '请选择快递公司' }
                        ]}
                        colon
                        isLink
                    >
                        <React.$Vant.Input placeholder="快递公司" isLink readonly value={expname ? expname : ''} />
                    </React.$Vant.Form.Item>

                    <React.$Vant.Popup position="bottom" round visible={expshow} onClose={() => { setExpshow(false) }}>
                        <React.$Vant.Picker
                            ref={picker}
                            title="快递公司"
                            columns={express}
                            onConfirm={ExpressConfirm}
                            onCancel={() => { setExpshow(false) }}
                            defaultValue={index}
                        />
                    </React.$Vant.Popup>

                    {/* 快递单号 */}
                    <React.$Vant.Form.Item
                        label="快递单号"
                        colon
                    >
                        <React.$Vant.Input placeholder="请输入快递单号" value={buscode ? buscode : ''} onChange={setBuscode} />
                    </React.$Vant.Form.Item>

                    <div style={{width:'90%',margin:'10px auto'}}>
                        <React.$Vant.Button nativeType="submit" block size="normal" type="primary">立即归还</React.$Vant.Button>
                    </div>
                </React.$Vant.Form>


            </div>
        </>
    )
}

export default Recovery